<template>
  <div style="display: flex;">
    <asideTabs :searchVocDetails="searchVocDetails" :vocId="vocId" :vocNext="vocNext" :path="path"></asideTabs>
    <div class="bacteria">
    <div class="bacteria-content">
      <div class="page-title">
        <P
          >降解菌降解的物质为<span style=" color: rgba(0, 84, 190, 1);"
            ><span v-html="formatting(vocNext)"></span
            >{{ searchVocDetails }}</span
          ></P
        >
      </div>
      <div class="content" v-loading="loading"
    element-loading-text="数据加载中"
    element-loading-spinner="el-icon-loading"
    style="margin-bottom: 20px;">
        <el-table
          border
          class="abcd"
          :data="tableData"
          style="width: 100%"
          :highlight-current-row="true"
          :header-cell-style="{
            background: '#eef1f6',
            color: 'black',
          }"
          :cell-style="{ height: '35px', padding: '0' }"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <div class="expand-all">
                <div class="expand-title">培养条件</div>
                <div class="my-table">
                  <table width="1000">
                    <tr>
                      <th>培养基</th>
                      <th>培养温度(°C)</th>
                      <th>培养时间</th>
                      <th>培养时间单位</th>
                    </tr>
                    <tr
                      v-if="!props.row.degraBactCultrueList[0]"
                      :key="props.rowdegraBactCultrueList + '311'"
                    >
                      <td colspan="4">暂无数据</td>
                    </tr>
                    <tr
                      v-for="(content, i) in props.row.degraBactCultrueList"
                      :key="i + '213'"
                    >
                      <td>
                        <span>{{ content.culMedium }}</span>
                      </td>
                      <td>
                        <span>{{ content.culTemp }}</span>
                      </td>
                      <td>
                        <span>{{ content.culTime }}</span>
                      </td>
                      <td>
                        <span>{{ content.culTimeunit }}</span>
                      </td>
                    </tr>
                  </table>
                </div>
              </div>
              <div class="expand-all" style="margin-bottom: 20px">
                <div class="expand-title">降解效率</div>
                <div class="my-table">
                  <table width="1000">
                    <tr>
                      <th>降解浓度</th>
                      <th>降解浓度单位</th>
                      <th>降解时间</th>
                      <th>降解时间单位</th>
                      <th>降解效率(%)</th>
                    </tr>
                    <tr
                      v-if="!props.row.degraBactEffiencyList[0]"
                      :key="props.row.degraBactEffiencyList + '111'"
                    >
                      <td colspan="5">暂无数据</td>
                    </tr>
                    <tr
                      v-for="(contentt, a) in props.row.degraBactEffiencyList"
                      :key="a + '213213'"
                    >
                      <td>
                        <span>{{ contentt.degConc }}</span>
                      </td>
                      <td>
                        <span>{{ contentt.degConcunit }}</span>
                      </td>
                      <td>
                        <span>{{ contentt.degTime }}</span>
                      </td>
                      <td>
                        <span>{{ contentt.degTimeunit }}</span>
                      </td>
                      <td>
                        <span>{{ contentt.degEffi }}</span>
                      </td>
                    </tr>
                  </table>
                </div>
              </div>
              <div
                class="expand-all"
                style="margin-bottom: 20px"
                v-if="props.row.degraBactPrinciple"
              >
                <div class="expand-title">降解机理</div>
                <div class="my-table my-table-p">
                  <p class="mt-p">
                    {{ props.row.degraBactPrinciple.degraFormula }}
                  </p>
                  <p>{{ props.row.degraBactPrinciple.degraCondition }}</p>
                </div>
                <div class="image"></div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="群落菌英文名" prop="nameEn">
          </el-table-column>
          <el-table-column label="群落菌中文名" prop="nameCn">
          </el-table-column>
          <el-table-column label="三级类别" prop="l3name"> </el-table-column>
          <el-table-column label="菌属" prop="genus"> </el-table-column>
          <el-table-column label="呼吸类型" prop="respType"> </el-table-column>
          <el-table-column label="链接名" prop="refText">
            <template slot-scope="scope">
              <a :href="scope.row.refLink" target="_blank">{{
                scope.row.refText
              }}</a>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
  </div>

</template>

<script>
// import { getBacteriaData, getBacteriaSimpleData } from "@/api/publicSearch";
import { getBacteriaData } from "@/api/publicSearch";
import { formatting } from "@/api/formatVoc";
import asideTabs from "@/components/AsideTabs"
export default {
  name: "bacteriaView",
  components:{asideTabs},
  data() {
    return {
      tableData: [],
      searchVocDetails: "",
      vocId: "",
      vocNext: "",
      path: 'bacteria',
      radio: '',
    };
  },
  mounted() {
    (this.searchVocDetails = this.$route.query.searchVocDetails),
      (this.vocId = this.$route.query.vocId);
    this.vocNext = this.$route.query.vocNext;
    // getBacteriaSimpleData(this.vocId).then((res) => {
    //   this.tableData = res.data.data;
    // });
    this.loading = true;
    getBacteriaData(this.vocId).then((res) => {
      this.tableData = res.data.data;
      this.loading = false;
    });
  },
  methods: {
    bacteriaName() {
      this.bacteriaNameDialog = true;
    },
    bacteriaAgent() {
      this.bacteriaAgentDialog = true;
    },
    pageto(row) {
      // console.log(row, column, cell, event)
      console.log(row, 111111111);
      this.bacteriaNameDialog = true;
    },
    //链接中跳转函数
    gotoNewpage(str, radio) {
      let path = str;
      //设置同一个大气和催化反应转换
      this.radio = radio;
      this.$router.push({
        path: path,
        query: {
          searchVocDetails: this.searchVocDetails,
          vocId: this.vocId,
          radio: this.radio,
          vocNext: this.vocNext,
        },
      });
    },
    //格式化处理
    formatting(str) {
      return formatting(str);
    },
  },
};
</script>

<style scoped lang="scss">
@import "../css/common.scss";
.bacteria {
  width: 90%;
  .bacteria-content {
    margin-left: 0 auto;
  }
  .bacteria-title {
    text-align: left;
  }
  .title {
    font-size: 20px;
  }
  .table {
    margin-top: 10px;
  }
  .small {
    // text-align: left;
    font-size: 10px;
    vertical-align: super;
  }
  .contentp {
    font-style: 19px;
  }
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.contentp {
  font-style: 19px;
}
.my-table {
  // width: 100%;
  // position: relative;
  // top: -40px;
  margin-left: 55px;
  text-align: left;
}
.my-table > table {
  margin: auto;
  margin-top: 10px;
  td {
    height: #{$second_line_height}px;
    text-align: center;
  }
  th {
    // 里面的表头高度
    width: 20%;
    // height: 20px;
    text-align: center;
    padding: #{$second_table_height}px;
    // font-size: #{$third_font_size};
  }
}
.expand-title {
  text-align: left;
  margin-top: 12px;
  // font-size: 30px;
  font-size: #{$third_font_size};
  margin-bottom: 20px;
  margin-left: 60px;
  font-weight: 550;
  color: #606266;
}
.et-p {
  text-align: center;
  // margin: 0 auto;
  margin-bottom: 20px;
}
.expand-all {
  text-align: left;
  width: 1300px;
  margin-left: 10px;
  display: flex;
  justify-content: stretch;
  margin-bottom: 5px;
}
.page-title p {
  text-align: left;
  font-size: #{$first_font_size};
  font-weight: #{$first_font_weight};
  margin-top: #{$first_titile_top}px;
  margin-left: #{$first_titile_left}px;
  margin-bottom: #{$first_titile_bottom}px;
}
table {
  border-collapse: collapse;
  padding: 2px;
}
table,
table tr th,
table tr td {
  border-bottom: 1px solid #eef1f6;
}
table tr th {
  background-color: #eef1f6;
}
.content {
  text-align: left;
  font-size: #{$second_font_size};
  font-weight: #{$second_font_weight};
  margin-top: #{$second_titile_top}px;
  margin-left: #{$second_titile_left}px;
  margin-bottom: #{$second_titile_bottom}px;
}
.my-table-p {
  margin-left: 100px;
  width: 1000px;
  // font-size: #{$third_font_size};
}
.mt-p {
  text-align: center;
  font-size: 17px;
}
// 表头高度修改
::v-deep .el-table__header tr,
::v-deep .el-table__header th {
  // height: 10px;
  padding: #{$first_table_height}px;
}
// 表头高度修改结束
//相关链接
.link-ul li {
  list-style-type: square;
  width: 90%;
  text-align: left;
  color: rgba(0, 84, 190, 1);
  font-size: #{$third_font_size};
  font-weight: #{$third_font_weight};
  margin-top: #{$third_titile_top}px;
  margin-left: #{$third_titile_left}px;
  margin-bottom: #{$third_titile_bottom}px;
  cursor: pointer;
}
.link-title {
  text-align: left;
  font-size: #{$first_font_size};
  font-weight: #{$first_font_weight};
  margin-top: #{$first_titile_top}px;
  margin-left: #{$first_titile_left}px;
  margin-bottom: #{$first_titile_bottom}px;
}
</style>
